<!--
 * @Author: 330GRX 617947173@qq.com
 * @Date: 2023-09-28 16:45:22
 * @LastEditors: 330GRX 617947173@qq.com
 * @LastEditTime: 2023-10-02 12:18:12
 * @FilePath: \Realtime-Chat\web\src\components\Message.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="message-container">
    <div class="chat-header">
      <div class="user-details">
        <div class="avatar">
          <img :src="`data:image/svg+xml;base64,${currentChatStore.currentChat.avatarImage}`" alt="avatar" />
        </div>
        <div class="username">
          <h3>{{ currentChatStore.currentChat.username }}</h3>
        </div>
        <i @click="handleFinishChat">
          <svg t="1695892085136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4185" width="35" height="35">
            <path
              d="M511.317333 456.021333a25.173333 25.173333 0 0 0 18.517334-7.509333 24.704 24.704 0 0 0 7.509333-18.090667V239.36a25.344 25.344 0 0 0-7.509333-18.304 24.832 24.832 0 0 0-18.517334-7.722667 24.362667 24.362667 0 0 0-18.133333 7.722667 25.344 25.344 0 0 0-7.509333 18.346667v191.018666a24.746667 24.746667 0 0 0 7.509333 18.090667 24.746667 24.746667 0 0 0 18.133333 7.509333z"
              fill="#ffffff"
              p-id="4186"
            ></path>
            <path
              d="M801.322667 468.352a288.768 288.768 0 0 0-25.344-66.346667 315.562667 315.562667 0 0 0-39.978667-58.325333A299.648 299.648 0 0 0 682.666667 295.381333c-36.266667-22.016-69.077333 20.778667-43.861334 45.354667a240.810667 240.810667 0 1 1-261.802666 5.205333c27.648-23.68-12.416-67.968-43.008-45.909333a323.754667 323.754667 0 0 0-50.645334 48c-14.933333 17.493333-27.733333 36.736-38.016 57.344-10.24 20.437333-18.090667 41.984-23.68 64.64A289.962667 289.962667 0 0 0 213.333333 539.349333c0 41.386667 7.765333 80.128 23.338667 116.352a296.746667 296.746667 0 0 0 64 94.634667 308.394667 308.394667 0 0 0 95.018667 64c36.224 15.786667 74.752 23.68 115.626666 23.68 41.386667 0 80.128-7.893333 116.352-23.637333a304.213333 304.213333 0 0 0 94.677334-64c26.88-26.88 48.213333-58.453333 64-94.72 15.786667-36.181333 23.68-74.965333 23.68-116.309334 0-23.893333-2.944-47.786667-8.704-70.997333z"
              fill="#ffffff"
              p-id="4187"
            ></path>
          </svg>
        </i>
      </div>
    </div>
    <MessageList :socket="props.socket" ref="child" />
    <ChatInput :handleSendMsg="handleSendMsg" />
  </div>
</template>

<script setup>
import { ref, watchEffect, onBeforeUnmount, defineProps } from 'vue'
import { getCurrentInstance, watch } from '@vue/runtime-core'
import { useCurrentChatStore, useCurrentUserStore } from '@/stores/index'
import { sendMessageRoute } from '@/utils/APIRoutes'
import ChatInput from '@/components/ChatInput.vue'
import MessageList from '@/components/MessageList.vue'
import axios from 'axios'

// 当前会话的用户
const currentChatStore = useCurrentChatStore()
// 当前用户
const currentUserStore = useCurrentUserStore()
// 当前用户
const currentUser = ref({})
// 接收父组件传递过来的socket对象
const props = defineProps({
  socket: Object
})
// 获取实例，用于得到ref
const currentInstance = getCurrentInstance()
// 接收到的消息
const arrivalMessage = ref(null)

// watchEffect 也是一个帧听器，是一个副作用函数。
// 它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，组件卸载的时候会停止监听。
// 这里监听到currentUserStore.currentUser改变
const stop = watchEffect(() => {
  if (currentUserStore.currentUser) {
    currentUser.value = currentUserStore.currentUser
  }
}, [currentUserStore.currentUser])
const stopProps = watchEffect(() => {
  if (props) {
    // console.log(props.socket.current)
  }
}, [props])
onBeforeUnmount(() => {
  // 停止监听
  stop()
  stopProps()
})

/**
 * @description: 处理关闭会话
 */
const handleFinishChat = () => {
  currentChatStore.setCurrentChat(null)
}
/**
 * @description: 处理消息发送
 * @param {String} msg
 */
const handleSendMsg = async (msg) => {
  await axios.post(sendMessageRoute, {
    from: currentUser.value._id,
    to: currentChatStore.currentChat._id,
    message: msg
  })

  // 向socket提交send-msg事件
  props.socket.current.emit('send-msg', {
    from: currentUserStore.currentUser._id,
    to: currentChatStore.currentChat._id,
    message: msg
  })
  // 调用子组件的handleSendMsg函数
  currentInstance.ctx.$refs.child.handleSendMsg(msg)
}

// 监听接收消息
watchEffect(() => {
  if (props.socket.current) {
    props.socket.current.on('msg-receive', (msg) => {
      console.log(223)
      arrivalMessage.value = { fromSelf: false, message: msg }
      currentInstance.ctx.$refs.child.handleReceiveMsg(arrivalMessage.value)
    })
  }
}, [])
</script>

<style lang="scss" scoped>
.message-container {
  padding-top: 1rem;
  display: grid;
  grid-template-rows: 10% 78% 12%;
  gap: 0.1rem;
  overflow: hidden;
  @media screen and (min-width: 720px) and (max-width: 1080px) {
    grid-auto-rows: 15% 70% 15%;
  }
  .chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    position: relative;
    .user-details {
      display: flex;
      align-items: center;
      gap: 1rem;
      .avatar {
        img {
          height: 3rem;
        }
      }
      .username {
        h3 {
          color: white;
        }
      }
      .icon {
        background-color: rgb(100, 182, 135);
        border-radius: 0.5rem;
        cursor: pointer;
        position: absolute;
        top: 0.5rem;
        right: 2rem;
      }
    }
  }
}
</style>
